'use client'
import { useRouter } from 'next/navigation'
import React, { useEffect, useState } from 'react'

export default function DashboardPage() {

  const [data, setData] = useState<{ name: string; id: number }[]>([])
  const router = useRouter()
  
  useEffect(() => {
    const load = async () => { 
      const res = await fetch('http://localhost:3000/api/user', {
        method: 'GET',
      })
      const { data } = await res.json()
      setData(data)
    }
    load()
  }, [])

  return (
    <>
      {
        data.map((item: { name: string, id: number }) => (
          <div className='flex flex-col items-center cursor-pointer' key={item.id} onClick={() => router.push(`/dashboard/${item.id}`)}>
            <div className='w-24 h-24 bg-amber-600 rounded-full mb-2 flex items-center justify-center text-5xl text-white'>{item.name.charAt(0)}</div>
            <div className='font-bold text-xl text-purple-500'>{item.name}</div>
          </div >
        ))
}
    </>
  )
}
